
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<div>{{pmsg}}</div>
		<menu-item :pstr="pstr" :pnum='12' :pboo="true" :parr="parr" :pobj="pobj"></menu-item>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
    <script>Vue.config.productionTip = false</script>
	<script type="text/javascript">
		/*
			父组件向子组件传值-props属性值类型
				<menu-item :pstr="pstr" :pnum='12'></menu-item>
				上面有一个细节需要注意一下：就是:pnum='12'加上:绑定了数据那么数据的类型就变成了number 可以直接在模板中进行运算， 如果不加上冒号，那么该数据的类型就是String, 对他进行操作就是字符串拼接了！(如果加上冒号，那么该数据类型就是该数据原始的类型！没加就是字符串)


		*/
		
		Vue.component('menu-item', {
			props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
			template: `
				<div>
					<div>{{pstr}}</div>
					<div>{{pnum}}</div>
					<div>{{pboo}}</div>
					<ul>
						<li :key="index" v-for="(item, index) in parr">{{item}}</li>
					</ul>
					<div>
						<span>{{pobj.name}}</span>
						<span>{{pobj.age }}</span>
					</div>
				</div>
			`
		})
		var vm = new Vue({
			el: '#app',
			data: {
				pmsg: '父组件中的内容',
				pstr: 'hello',
				parr: ['apple', 'orange', 'banana'],
				pobj: {
					name: 'lvhang',
					age: 23
				}
			},
			
		})
	</script>
</body>
</html>